<template>
  <div class="dashboard-container">
	<div class="dashboard-text" style="text-align: center;">
	  {{name}}<br>欢迎您登录车e估大众版后台管理系统<br>
      <div :class="[ isActive ? 'normal' : 'change']" style="position: fixed;margin: 0 auto;right: 0;bottom: 40px;"><img src="./layout.png" style="width: 100%"/></div>
	</div>
    <!-- <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  computed: {
     isActive() {
      if (this.$store.getters.sidebar.opened) {
        return false
      } else {
        return true
      }
    },
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.dashboard-container {
  width:100%;
  /*background: url(../../assets/images/layout.png) center 300px no-repeat #fff!important;*/
  text-align: center;
  border-radius: 12px;
  @media screen and(min-width:1600px) {
    .dashboard-text {
      margin-top: 5%;
      font-size: 38px;
      line-height: 56px;
    }
    .normal {
      left: 36px;
      max-width: 1049px;
      width: 1049px;/*  max-width: 55%; */
    }
    .change {
      left: 200px;
      max-width: 1049px;
      width: 1049px;
    }
  }
  @media screen and(min-width:1280px)and(max-width:1600px) {
    .dashboard-text {
      margin-top: 5%;
      font-size: 36px;
      line-height: 54px;     
    }
    .normal {
      left: 36px;
      max-width: 799px;
      width: 799px;/*  max-width: 55%; */
    }
    .change {
      left: 200px;
      max-width: 899px;
      width: 899px;
    }
  }
  @media screen and(min-width:800px)and(max-width:1280px) {
    .dashboard-text {
      margin-top: 5%;
      font-size: 34px;
      line-height: 52px;
    }
    .normal {
      left: 36px;
      max-width: 599px;
      width: 599px;/*  max-width: 55%; */
    }
    .change {
      left: 200px;
      max-width: 699px;
      width: 699px;
    }
  }
}
</style>
